<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。 -->
        <!-- 指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外） -->
        <p v-if="seen">现在你看到我了</p>
        <!-- v-bind 指令响应式地更新 HTML attribute -->
        <a v-bind:href="url">...</a>
        <!-- v-on 指令用于监听 DOM 事件 -->
        <a v-on:click="getMess">...</a>
        <!-- ----------------- -->
        <!-- 动态参数 -->
        <!-- 从 2.6.0 开始，用方括号括起来的 JS 表达式作为一个指令的参数 -->
        <!-- attributeName 会被作为一个 JS 表达式进行动态求值，求得的值将会作为最终的参数来使用 -->
        <!-- 如果 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href -->
        <a v-bind:[attributeName]="url"> ... </a>
        <!-- 当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus -->
        <a v-on:[eventName]="doSomething"> ... </a>
        <!-- 注意：避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写 -->
        <!-- 如上，需要实例有全小写的名为`attributename` | `eventname` property ，否则代码无效-->

        <!-- 空格和引号，放在 HTML attribute 名里是无效的 -->
        <!-- 以下会触发一个编译警告 -->
        <a v-bind:['foo' + bar]="value"> ... </a>
        <!-- 变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。 -->

        <!-- ------------------------- -->
        <!-- 缩写 -->
        <!-- 完整语法 -->
        <a v-bind:href="url">...</a>

        <!-- 缩写 -->
        <a :href="url">...</a>

        <!-- 动态参数的缩写 (2.6.0+) -->
        <a :[key]="url"> ... </a>

        <!-- 完整语法 -->
        <a v-on:click="doSomething">...</a>

        <!-- 缩写 -->
        <a @click="doSomething">...</a>

        <!-- 动态参数的缩写 (2.6.0+) -->
        <a @[event]="doSomething"> ... </a>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                seen: true,
                url: "www.xxx.com",
                attributename: "href",
                eventname: "click",
            },
            methods: {
                getMess() {
                    alert('hello')
                },
                doSomething() {
                    alert('doSomething')
                }
            }
        })

        vm.b = 'ohoh'

        vm.rawHtml = '<div>hahaha<span style="color:red">this is red</span></div>'

    </script>
</body>

</html>